<template>
    <div class="box_bg">
        <h2 class="box_tit">
            <i class="icon icon1"></i>培养计划
            <i class="reti"></i>
        </h2>
        <!-- 内容区域  开始 -->
        <div class="components_con" @keyup.enter="queryTable">
            <!-- 查询开始 -->
            <div class="components_searchs">
                <span class="tit">学校：</span>
                <el-select filterable clearable v-model="table.queryParams.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                    <el-option v-for="item in schoolList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                </el-select>

                <span class="tit">学院：</span>
                <el-select v-model="table.queryParams.secondSchoolId"  filterable clearable placeholder="请选择学院" @change="changeSecondSchool">
                    <el-option v-for="item in secondSchoolList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                </el-select>

                <span class="tit">专业：</span>
                <el-select v-model="table.queryParams.professionId"  filterable clearable placeholder="请选择专业">
                    <el-option v-for="item in professionList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                <el-button type="primary" icon="el-icon-view" size="mini" @click="showMoreSearch">高级查询</el-button>
            </div>
            <div v-show = "moreSearchDisplay" class="components_searchs">
                <span class="tit">年级：</span>
                <el-select v-model="table.queryParams.grade"  filterable clearable placeholder="请选择年级">
                    <el-option v-for="item in gradeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>

                <span class="tit">课程：</span>
                <el-input clearable placeholder="请输入课程编号/名称" v-model="table.queryParams.course">
                </el-input>

                <span class="tit">学期：</span>
                <el-select v-model="table.queryParams.semester"  filterable clearable placeholder="请选择学期">
                    <el-option v-for="item in semesterList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </div>
        </div>
        <!-- components_btns -->
        <div class="components_btns clearfix">
            <div class="fl">
                <el-button type="primary" v-has="'trainPlan:generate'" size="mini" icon="el-icon-plus" @click="showGenerateDialog">生成培养计划</el-button>
                <el-button type="primary" v-has="'trainPlan:add'" size="mini" icon="el-icon-plus" @click="showAddDialog">添加计划</el-button>
                <el-button type="primary" v-has="'trainPlan:export'" size="mini" @click="exportPlan">
                    <i data-v-5d8a5d9d="" class="iconfont icon-leading-iout"></i>
                    导出
                </el-button>
            </div>
        </div>
        <!-- components_btns -->
        <!-- <div class="scrollBarX"> -->
            <vue-table
                :api-url="table.apiUrl"
                :fields="table.fields"
                :appendParams="table.queryParams"
                :content="self"
                ref="trainPlanTable">
            </vue-table>
        <!-- </div> -->
        <train-plan-add ref="trainPlanAdd"></train-plan-add>
        <train-plan-edit ref="trainPlanEdit"></train-plan-edit>
        <train-plan-generate ref="trainPlanGenerate"></train-plan-generate>
        <config-course-book ref="configCourseBook"></config-course-book>
        <config-teacher  ref="configTeacher"></config-teacher>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { enums } from '@/constant'
    import { config } from '@/config'
    import { mapGetters } from 'vuex'
    import trainPlanAdd from './train-plan-add'
    import trainPlanEdit from './train-plan-edit'
    import trainPlanGenerate from './train-plan-generate'
    import configCourseBook from './config-course-book'
    import configTeacher from './config-teacher'
    export default {
        components: {
            trainPlanAdd,
            trainPlanEdit,
            trainPlanGenerate,
            configCourseBook,
            configTeacher
        },
        data() {
            return {
                self: this,
                secondSchoolList:null,
                professionList:null,
                gradeList:null,
                semesterList:null,
                moreSearchDisplay:false,
                // 班级表格
                table: {
                    apiUrl: api.trainPlan.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        course: null, // 课程名称/编号
                        grade: null, // 年级
                        semester: null, // 班级
                    },
                    fields: [{
                            prop: "trainPlan.schoolName",
                            label: "学校",
                        },
                        {
                            prop: "trainPlan.secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "trainPlan.professionName",
                            label: "专业",
                        },
                        {
                            prop: "trainPlan.grade",
                            width: '80',
                            label: "年级",
                            formatter:function(row, column, cellValue){
                                return cellValue == null ? null : cellValue + "级";
                            }
                        },
                        {
                            prop: "trainPlan.semester",
                            label: "学期",
                        },
                        /* {
                            prop: "courseNo",
                            label: "课程编号",
                        }, */
                        {
                            prop: "courseName",
                            label: "课程名称",
                        },
                        {
                            prop: "teacherName",
                            label: "讲师",
                           /*  formatter: function(row, column, cellValue){
                                let teacherName = "";
                                for(let item of cellValue){
                                    teacherName += item.name + "，";
                                }
                                teacherName = teacherName.substring(0, teacherName.length - 1);  ;
                                return teacherName;
                            } */
                        },
                        {
                            prop: "practicePeriod",
                            width: '50',
                            label: "课时",
                            formatter: function(row, column, cellValue){
                                return row.theorizingPeriod + row.practicePeriod;
                            }
                        },
                        {
                            prop: "__component",
                            label: "开课状态",
                            componentName: "trainPlanSwitch",
                        },
                        {
                            prop: "__component",
                            width: '85',
                            label: "教材配置状态",
                            componentName: "configCourseBookState",
                        },
                        {
                            prop: "sourceTypeText",
                            label: "来源",
                        },
                        {
                            prop: "selectiveTypeText",
                            label: "课程类型",
                            width: '70',
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            width: '180',
                            actions: [{
                                    label: "讲师配置",
                                    type: "edit",
                                    auth: 'trainPlan:configTeacher',
                                    func: function(vm, row) {
                                        vm.$refs.configTeacher.showDialog(row.trainPlan.id, row.id);
                                    }
                                },
                                {
                                    label: "教材配置",
                                    type: "edit",
                                    auth: 'trainPlan:configCourseBook',
                                    func: function(vm, row) {
                                        vm.$refs.configCourseBook.showDialog(row.trainPlan.id, row.id);
                                    }
                                },
                                {
                                    label: "编辑",
                                    type: "edit",
                                    auth: 'trainPlan:update',
                                    func: function(vm, row) {
                                        vm.$refs.trainPlanEdit.showDialog(row.id);
                                    }
                                },
                               /*  {
                                    label: "删除",
                                    type: "delete",
                                    auth: 'trainPlan:delete',
                                    func: function(vm, row) {
                                        vm.deleteClassById(row);
                                    }
                                }, */
                            ]
                        },
                    ],
                },
            };
        },
        created() {
            // 院校树初始化 获取全部院校列表数据
            this.getSchoolList();
            // 查询年级列表数据
            this.getGradeByDicts();
            // 获取学期列表数据
            this.getSemesterListByDicts();
        },
        mounted() {
        },
        computed:{
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        watch: {
            filterText(val) {
                this.$refs.schoolTree.filter(val);
            }
        },
        methods: {
            // 高级查询方法
            showMoreSearch(){
                if(this.moreSearchDisplay){
                    this.moreSearchDisplay = false
                }else{
                    this.moreSearchDisplay = true
                }

            },
            // 获取院校数据
            getSchoolList() {
                this.$store.dispatch("getSchoolList");
            },
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询年级(来自数据字典)
            getGradeByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "grade",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.gradeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询学期列表(来自字典)
            getSemesterListByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "semester_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 根据id删除
            deleteClassById(row) {
                let vm = this;
                vm.$message('删除功能暂不开放！');
                return;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.schoolClass.deleteById + row.id)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    message: response.data.msg,
                                    type: 'success',
                                });
                                vm.$refs.table.$emit('vuetable:current-refresh')
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                }, () => {})
            },
            // 打开新增培养方案dialog
            showAddDialog() {
                this.$refs.trainPlanAdd.showDialog();
            },
            // 打开生成培养方案dialog
            showGenerateDialog(){
                this.$refs.trainPlanGenerate.showDialog();
            },
            // 生成培养计划
            generatePlan() {
                let vm = this;
                vm.axios.get(api.trainPlan.generate, {
                     params: {
                        type: "semester_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 导出培养计划
            exportPlan() {
                let href = config.BASE_URL + api.trainPlan.exportExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                window.location.href = href;
            },
            changeSchool(schoolId){
                this.table.queryParams.secondSchoolId = null;
                this.table.queryParams.professionId = null;
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId){
                this.table.queryParams.professionId = null;
                this.getProfessionList(this.table.queryParams.schoolId, secondSchoolId);
            },
            changeProfession(professionId){
                this.getGradeList(professionId);
            },
            // 查询按钮
            queryTable() {
                this.$refs.trainPlanTable.$emit('vuetable:refresh')
            },
            // 重置
            reset(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.secondSchoolList = [];
                this.professionList = [];
                this.$refs.trainPlanTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
</style>


